import React from "react";
import {
  Form,
  Row,
  Col,
  Input,
  Select,
  Radio,
  Switch,
  Cascader,
  TimePicker,
  DatePicker,
} from "antd";

export const FormWarpper = (props) => {
  const { formSetting = {}, handleFinish, formMenuSlot, form, formRef } = props;
  const { Option } = Select;

  const { RangePicker } = DatePicker;

  const onFinish = (values) => {
    handleFinish(values);
  };

  return (
    <div className="formWarpper">
      <Form
        layout="inline"
        form={form}
        onFinish={onFinish}
        ref={formRef}
        autoComplete="off"
        labelCol={{
          flex: formSetting.labelCol ? `${formSetting.labelCol}px` : "100px",
        }}
        labelAlign={formSetting.labelAlign || "right"}
        labelWrap={!formSetting.labelWrap ? false : formSetting.labelWrap}
        wrapperCol={{ flex: 1 }}
      >
        <Row gutter={24} style={{ width: "100%" }}>
          {formSetting.columns?.map((item, index) => (
            <Col
              style={{
                marginBottom: "24px",
                display:
                  !item.disPlay || item.disPlay == "block" ? "block" : "none",
              }}
              span={item.row ? 24 : formSetting.span}
              xs={24}
              sm={24}
              md={12}
              lg={item.row ? 24 : formSetting.span}
              xl={item.row ? 24 : formSetting.span}
              xxl={item.row ? 24 : formSetting.span}
              key={index}
            >
              <Form.Item
                name={item.name}
                label={item.label}
                valuePropName={item.valuePropName}
                rules={item.rules}
              >
                {!item.slot && (!item.formType || item.formType == "input") ? (
                  <Input
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    readOnly={item.readOnly}
                  ></Input>
                ) : !item.slot && item.formType == "select" ? (
                  <Select
                    mode={item.multiple ? "multiple" : ""}
                    showSearch={item.showSearch}
                    optionFilterProp={item.optionFilterProp || "label"}
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请选择 ${item.label}`
                    }
                    options={item.dicData || []}
                  />
                ) : !item.slot && item.formType == "textarea" ? (
                  <Input.TextArea
                    maxLength={item.maxLength || ""}
                    showCount={item.showCount}
                    autoSize={item.autoSize || { minRows: 2, maxRows: 6 }}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    allowClear={item.allowClear}
                    disabled={item.disabled}
                    readOnly={item.readOnly}
                  />
                ) : !item.slot && item.formType == "radio" ? (
                  <Radio.Group
                    name={item.name}
                    disabled={item.disabled}
                    optionType={item.optionType}
                    buttonStyle={item.buttonStyle}
                  >
                    {item.dicData.map((dic, i) => (
                      <Radio value={dic.value} disabled={dic.disabled} key={i}>
                        {dic.label}
                      </Radio>
                    ))}
                  </Radio.Group>
                ) : !item.slot && item.formType == "switch" ? (
                  <Switch
                    disabled={item.disabled}
                    checkedChildren={item.checkedChildren || ""}
                    unCheckedChildren={item.unCheckedChildren || ""}
                    defaultChecked={item.defaultChecked}
                    size={item.size}
                  />
                ) : !item.slot && item.formType == "cascader" ? (
                  <Cascader
                    options={item.dicData}
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    disabled={item.disabled}
                  />
                ) : !item.slot && item.formType == "datePicker" ? (
                  <DatePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    picker={item.picker}
                    disabled={item.disabled}
                    showTime={item.showTime}
                    style={{ width: "100%" }}
                  />
                ) : !item.slot && item.formType == "timePicker" ? (
                  <TimePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : `请输入 ${item.label}`
                    }
                    style={{ width: "100%" }}
                  />
                ) : !item.slot && item.formType == "rangePicker" ? (
                  <RangePicker
                    placeholder={
                      item.placeholder
                        ? item.placeholder
                        : ["开始时间", "结束时间"]
                    }
                    showTime={item.showTime}
                    picker={item.picker}
                    style={{ width: "100%" }}
                  />
                ) : (
                  item.component
                )}
              </Form.Item>
            </Col>
          ))}
        </Row>
        {formMenuSlot !== "undefined" ? (
          <Row
            style={{
              width: "100%",
              textAlign: formSetting.menuPosition || "center",
            }}
          >
            <Col span={24}>{formMenuSlot}</Col>
          </Row>
        ) : (
          ""
        )}
      </Form>
    </div>
  );
};

export default FormWarpper;
